<template>
    <div class="vk-warp" id="vk-warp">
      <div class="vk-model">
        <div class="vk-form">
            <div class="form-area">
            <x-input class="vk-cell" title="姓名 " name="username" placeholder="请输入姓名" v-model="form.memberNameChn" is-type="china-name"></x-input>
            <x-input class="vk-cell" title="手机 " mask="999 9999 9999" v-model="form.telephone" placeholder="请输入手机号码" :max="13" keyboard="number" is-type="china-mobile"></x-input>
            <x-input style="padding-right:0" :show-clear="false" title="验证码" class="weui-vcode vk-cell" v-model="form.authCode" placeholder="请输入验证码" keyboard="number">
            <div v-show="!getCodeTask" class="code" slot="right"  @click="getCode()">发送验证码</div>
            <div v-show="getCodeTask" slot="right" class="code" style="opacity:0.5">重新发送({{count}})</div>
            </x-input>
            </div>
            <x-button v-show="!form.memberNameChn || !form.telephone|| !form.authCode" class="vk-button" style="opacity: 0.5;" type="default">提交</x-button>
            <x-button v-show="form.memberNameChn && form.telephone && form.authCode" @click.native="submit()" class="vk-button" type="default">提交</x-button>
            <div class="xy">提交即表示您同意<span @click="go()">《用户注册协议》</span></div>
        </div>
        <div class="footer">个人资料将由并仅限宁波美好家使用</div>
    <div v-transfer-dom>
      <popup v-model="show" position="top" :show-mask="false">
        <div class="position-vertical-demo">
          {{msg}}
        </div>
      </popup>
    </div>
    </div>
    </div>
</template>

<script>
// import axios from "axios";
import { XInput, XButton, Group, Cell, Popup, Alert } from "vux";
export default {
  components: {
    Popup,
    XInput,
    XButton,
    Group,
    Cell,
    Alert
  },
  data() {
    return {
      msg: "",
      form: {
        openId: localStorage.getItem("openId"),
        memberNameChn: "",
        telephone: "",
        authCode: ""
      },
      value5: [],
      value: "",
      getCodeTask: false,
      showPopupPicker: false,
      show: false,
      count: 60,
      timer: null,
      flag: 1
    };
  },
  methods: {
    search() {
      let self = this;
      this.$http
        .post(
          "/wx/login",
          JSON.stringify({ openId: localStorage.getItem("openId") })
        )
        .then(function(response) {
          self.$vux.loading.hide();
          let req = response.data;
          if (req.respCode.code !== "MEHOS-10000") {
            self.msg = req.respCode.message;
            self.show = true;
          } else {
            if (req.wxMemberInfo) {
              if (self.flag == 2) {
                self.showToast("注册成功", "success");
              }
              localStorage.setItem(
                "wxMemberInfo",
                JSON.stringify(req.wxMemberInfo)
              );
              self.$router.push({
                name: "Card"
              });
            }
          }
        })
        .catch(function(error) {
          self.$vux.loading.hide();
        });
    },
    submit() {
      let self = this;
      let req = this.form;
      if (!req.memberNameChn.replace(/\s+/g, "")) {
        self.$vux.alert.show({
          title: "信息",
          content: "姓名不能为空"
        });
        return false;
      }
      req.telephone = req.telephone.replace(/\s+/g, "");
      this.$http
        .post(
          "/wx/register",
          JSON.stringify({ wxMemberRegisterInfo: this.form })
        )
        .then(function(response) {
          let req = response.data;
          if (req.respCode.code !== "MEHOS-10000") {
            self.msg = req.respCode.message;
            self.show = true;
          } else {
            self.$vux.loading.show();
            self.flag = 2;
            self.search();
          }
        })
        .catch(function(error) {});
    },
    getCode() {
      let tel = this.form.telephone.replace(/\s+/g, "");
      if (!tel) {
        self.$vux.alert.show({
          title: "信息",
          content: "手机号码不能为空"
        });
        return false;
      }
      let self = this;
      this.$http
        .post("/sendSms", JSON.stringify({ telephone: tel }))
        .then(function(response) {
          let req = response.data;
          if (req.respCode.code !== "MEHOS-10000") {
            self.msg = req.respCode.message;
            self.show = true;
          } else {
            self.showToast("验证码已发送,请注意查收", "text");
            self.setPhone();
          }
        })
        .catch(function(error) {});
    },
    setPhone() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.getCodeTask = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.getCodeTask = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    showToast(text, type) {
      this.$vux.toast.show({
        text: text,
        type: type,
        width: "13em",
        position: "middle"
      });
    },
    go() {
      this.$router.push({
        name: "File"
      });
    }
  },
  created() {
    // 显示
    this.$vux.loading.show({
      text: "加载中"
    });
    this.flag = 1;
    this.search();
  },
  mounted() {
    document.getElementById("vk-warp").style.minHeight =
      document.body.clientHeight + "px";
    // 隐藏
    this.$vux.loading.hide();
  },
  watch: {
    show(val) {
      if (val) {
        setTimeout(() => {
          this.show = false;
        }, 2000);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "~vux/src/styles/close.less";
.vk-warp {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  width: 100%;
  height: 100%;
  background: url("../assets/images/bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  .vk-model {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.vk-form {
  margin: 20px 20px 0 20px;
  padding: 10px 15px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  .xy {
    margin-bottom: 6px;
    text-align: center;
    font-size: 13px;
    color: #b2b2b2;
    span {
      color: rgb(193, 157, 107);
    }
  }
  .weui-cell {
    height: 2.3em;
    padding-left: 0;
  }
  .weui-cell:before {
    display: none;
  }
  .vk-cell {
    label {
      width: 4em;
    }
  }
  .code {
    color: #c19d6b;
  }
  .vk-cell:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 0;
  }
  .vk-button {
    margin: 16px 0;
    color: #ffffff;
    background: #c19d6b;
    &:after {
      border: none;
    }
  }
}
.position-vertical-demo {
  background-color: #de5452;
  color: #ffffff;
  text-align: center;
  padding: 10px;
}
.footer {
  color: #ffffff;
  width: 100%;
  opacity: 0.7;
  font-weight: lighter;
  text-align: center;
  font-size: 12px;
  position: absolute;
  bottom: 20px;
}
</style>
